<template>
	<view class="gridWrap">
		<view class="formItem">
			<view class="formItemTit">所在省市县</view>
			<view class="formItemCon">
				<select-area
					currPage="selGrid"
					:specFlag="specFlag" 
					:province="provName" 
					:showAreaFlag="showAreaFlag" 
					:city="cityName" 
					:country="countryName" 
					:isHasSelFlag="isHasSelFlag"
					@toggleAreaPicker="toggleAreaPicker"
					@selected="selectCity"
				></select-area>
				<view class="iconfont icon-gengduo"></view>
			</view>
		</view>
		<view class="formItem">
			<view class="formItemTit">所在乡镇/街道</view>
			<view class="formItemCon" @tap="goSelTown">
				<view class="street" :class="[selTownFlag ? 'hasSel' : '']">{{townName}}</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
		</view>
		<view class="formItem">
			<view class="formItemTit">负责网格</view>
			<view class="formItemCon" @tap="goSelGrid">
				<view class="street" :class="[selGridFlag ? 'hasSel' : '']">{{gridName}}</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
		</view>
		<button class="comBtn" :class="[groupId == 0 ? 'dis' : '']" :disabled="isDisableFlag" @tap="goSumitApply">{{btnTit}}</button>
	</view>
</template>

<script>
	import { applyRzZzService } from '@/api/mine/index'
	export default {
		data(){
			return{
				provName : '请选择省',
				cityName : '市',
				countryName : '县/区',
				townName:'请选择所在乡镇/街道',
				gridName:'请选择负责网格',
				selTownFlag:false,
				selGridFlag:false,
				specFlag : false,
				isHasSelFlag:false,
				showAreaFlag:false,
				countyCode:'',
				groupId:0,
				isDisableFlag:false,
				btnTit:'提交资料',
				fromPage:''
			}
		},
		onLoad(option){
			this.fromPage =option.fromPage;
		},
		methods:{
			toggleAreaPicker(isShow){
				this.showAreaFlag = isShow;
			},
			selectCity(e){
				this.showAreaFlag = false;
				this.isHasSelFlag = e.isHasSelFlag;
				this.provName = e.province;
				this.cityName = e.city;
				this.countryName = e.country;
				this.countyCode = e.countyCode;
				this.initParams()
			},
			initParams(){
				this.townName = '请选择所在乡镇/街道';
				this.selTownFlag = false;
				this.gridName = '请选择负责网格';
				this.selGridFlag = false;
				this.groupId = 0;
			},
			goSelTown(){
				if(this.countyCode == ''){
					this.util.showToast('请选择省市县');
					return;
				}
				let townName = this.townName != '请选择所在乡镇/街道' ? this.townName : ''
				uni.navigateTo({
					url:'/pages/subMine/applyRz/townList?countyCode=' + this.countyCode + '&townName=' + townName
				})
			},
			goSelGrid(){
				if(this.townName == '请选择所在乡镇/街道'){
					this.util.showToast('请选择乡镇');
					return;
				}
				uni.navigateTo({
					url:'/pages/subMine/applyRz/gridList?countyName=' + this.countryName + '&townName=' + this.townName + '&groupId=' + this.groupId
				})
			},
			goSumitApply(){
				if(this.groupId == 0){
					this.util.showToast('请选择负责网格');
					return;
				}
				this.isDisableFlag = true;
				this.btnTit = '提交中...';
				let field = { city:'濮阳市',groupId:this.groupId }
				uni.showLoading({ title: '提交中...', mask: true });
				let delta = this.fromPage == 'minePage' ? 2 : 3;
				applyRzZzService(field).then(res=>{
					this.util.showToast('提交成功,等待后台审核中');
					setTimeout(()=>{
						uni.navigateBack({
							delta
						})
					},1500)
				}).catch(err=>{
					this.isDisableFlag = false;
					this.btnTit = '提交资料';
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		border-top: $comBor;
	}
	.gridWrap{
		padding: 30rpx 30rpx 0;
	}
	.formItem{
		height: var(--hei90);
		line-height: var(--hei90);
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		.formItemTit{
			width: 200rpx;
			height: 100%;
			font-size: 26rpx;
			color: $pss-text-color0;
 		}
		.formItemCon{
			flex: 1;
			height: 100%;
			position: relative;
			.street{
				font-size: 26rpx;
				color: #888;
				&.hasSel{
					color:$pss-text-color0;
				}
			}
			.icon-gengduo{
				font-size: 22rpx;
				color: #999;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
	.comBtn{
		margin-top: calc(var(--hei100) * 2);
		&.dis{
			background: lighten($pss-color-blueDeep, $amount: 20%);
		}
	}
</style>